<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/js/element-ui/lib/index.css}" rel="stylesheet">
    <style>
        .el-input {
            width: 190px;
        }

        .text {
            font-size: 14px;
        }

        .item {
            /*margin-bottom: 18px;*/

        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 480px;
            margin: 20px auto;
        }

        .title {
            text-align: center;
        }

        .el-card__header {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
            <span class="title">留下您的宝贵意见，我们会在第一时间回复您</span>
            <!--            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>

        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="意见类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择意见类型">
                    <el-option label="游戏区服未收录" value="0"></el-option>
                    <el-option label="建设性意见" value="1"></el-option>
                    <el-option label="bug反馈" value="2"></el-option>
                    <el-option label="资金问题" value="3"></el-option>
                    <el-option label="其他" value="-1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="意见内容" prop="description">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>

            <el-form-item label="截图">
                <el-upload
                        action="/upload"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :limit=imgLimitNumber
                        :on-exceed="limitImgNumber"
                        :on-error="handleUploadError"
                        :on-success="handleUploadSuccess"
                        accept="image/*"
                        >

                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">立即提交</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>

    </el-card>


</div>
</div>
</body>
<div th:include="include :: footer"></div>

<script>
    var Main = {
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                imgLimitNumber: 3,
                uploadImgList: [],

                form: {
                    type: '',
                    email: '',
                    description: '',
                    deptId:-1
                },
                rules: {
                    description: [
                        {required: true, message: '请输入意见内容', trigger: 'blur'},
                    ],
                    type: [
                        {required: true, message: '请选择意见类型', trigger: 'blur'},
                    ]
                },
            }
        },

        methods: {

            submitForm(formName) {
                var globalThis = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.form.imgsUrl=this.postImgsUrl;

                        var data = this.form;
                        var _url = ("/system/zhFeedback/add");
                        $.ajax({
                            type: 'post',
                            url: _url,

                            data:data,
                            success:function (res) {
                                if(res.code==0){
                                    globalThis.$message({
                                        type:"success",
                                        message: '提交成功',
                                    })
                                }else{
                                    globalThis.$message.error('提交失败');
                                }
                            }
                        })
                    } else {

                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            handleRemove(file, fileList) {
                // console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            limitImgNumber() {
                this.$message({
                    message: '最多上传' + this.imgLimitNumber + '张',
                    type: 'warning'
                });
            },
            handleUploadSuccess: function (response, file, fileList) {
                if (response.code != 0) {
                    this.$message.error("上传失败，请重试")
                }
                file.remoteUrl=response.data.fileName;

                this.uploadImgList = fileList;
            },
            handleUploadError() {
                this.$message.error("上传失败，请重试")
            }
        },
        computed: {
            postImgsUrl() {
                var _result="";
                var _uploadImgList = this.uploadImgList;

                if (_uploadImgList.length > 0) {
                    var _array = new Array();
                    _uploadImgList.map(function (item, index, array) {
                        _array.push(item.remoteUrl);
                    })
                    _result = _array.join(";")
                }
                return _result;
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>